<template>
  <div class="fillcontain">
    <div>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/managerHomeT' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/managerHomeT/allClub' }">所有社团</el-breadcrumb-item>
<!--        <el-bradcrumb-item>人员列表</el-bradcrumb-item>-->
      </el-breadcrumb>
    </div>
    <div class="table_container">
      <el-table
        :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize).filter(data => !search || data.club_name.toLowerCase().includes(search.toLowerCase()))"
        border
        highlight-current-row
        style="width: 100%">
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="社团简介">
                <span>{{ props.row.introduce}}</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column
          label="社团编号"
          prop="club_id">
        </el-table-column>
        <el-table-column
          label="社团名"
          prop="club_name">
        </el-table-column>
        <el-table-column
          label="通知"
          prop="notice">
        </el-table-column>
        <el-table-column
          label="成立时间"
          prop="club_time">
        </el-table-column>
        <el-table-column
            label="社团状态"
            prop="club_status">
          </el-table-column>
          <el-table-column
          align="right">
          <template slot="header" slot-scope="scope">
            <el-input
              v-model="search"
              size="mini"
              placeholder="输入社团名搜索"/>
          </template>
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)">编辑
            </el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="Pagination">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[2,3,4,5]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.length"> //这是显示总共有多少数据，
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import {getClublist} from "@/api/club";

export default {
  data() {
    return {
      currentPage: 1, //初始页
      pageSize: 3,    //    每页的数据
      tableData: [],
      search: ''
    }
  },
  components:{
  },
  created() {
    this.initData();
  },
  methods: {
    initData() {
      this.getClubs();
    },

    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
    // 初始页currentPage、初始每页数据数pageSize和数据data
    handleSizeChange: function (size) {
      this.pageSize = size;
      this.initData();
      console.log(this.pageSize)  //每页下拉显示数据
    },
    handleCurrentChange: function (currentPage) {
      this.currentPage = currentPage;
      console.log(this.currentPage)  //点击第几页
    },
    async getClubs() {
      const clubs = await getClublist();
      this.tableData = [];
      console.log(clubs);
      clubs.forEach(item => {
        const tableData = {};
        tableData.club_id = item.clubId;
        tableData.club_name = item.clubName;
        tableData.introduce = item.introduce;
        tableData.notice = item.notice;
        tableData.club_time=item.clubTime;
        tableData.club_status=item.clubStatus;
        this.tableData.push(tableData);
      })
    },
  },
}
</script>
<style>
.table_container {
  padding: 20px;
}

.Pagination {
  display: flex;
  justify-content: flex-start;
  margin-top: 8px;
}

</style>
